import React,{ useState, useRef, useEffect }from 'react'
import { SectionList, StyleSheet, Text, View, TouchableWithoutFeedback, TouchableHighlight } from 'react-native'
import { observer, inject } from 'mobx-react'
import Header from './../components/Header'
import { useNavigation } from '@react-navigation/core'

interface Props {
  store:any
}
interface ICity {
  cityId:number,
  name:string,
  pinyin:string,
  isHot:number
}
const City = (props: Props) => {
  const [cityList, setcityList] = useState([])
  const [indexList, setindexList] = useState<string[]>([])
  const [current, setCurrent] = useState(0)
  const indexRef = useRef<any>()
  const navigation = useNavigation<any>()
  useEffect(() => {
    fetch('http://121.89.205.189/city/sortCity.json')
    .then(res=>res.json())
    .then(res=>{
      setcityList(res)
      const list:string[] =[]
      res.forEach((item:{letter:string;data:ICity[]})=>{
        item.data.length > 0 && list.push(item.letter)
      })
      setindexList(list)
    })
    return () => {
      
    }
  }, [])
  const renderItem = ({ item }: any) => {
    return (
      <TouchableHighlight  underlayColor="#ccc"
      onPress = { () => {
        props.store.app.changeCity(item.name) 
        navigation.goBack()
      }}>
        <View style={ styles.cityItem }>
          <Text>{item.name}</Text>
        </View>
      </TouchableHighlight>
      
    )
  }
  const renderHeader = ({ section: { letter }}: any) => {
    return (
      <View style={ styles.cityItemHeader }>
        <Text style = { styles.cityItemHeaderText}>{ letter }</Text>
      </View>
    )
  }
  const scrollToLocation = (index: number) => {
    console.log(index)
    setCurrent(index)
    indexRef.current.scrollToLocation({
      itemIndex: 0,
      sectionIndex: index
    })
  }
  return (
    <View style={styles.container}>
      <Header title='城市' />
      <View style={styles.content}>
        <SectionList 
          sections={ cityList } 
          renderItem={ renderItem } 
          renderSectionHeader={ renderHeader } 
          ref = { indexRef }
        >
        </SectionList>
      </View>
      <View style={ styles.indexListBox }>
        <View style={ styles.indexList}>
          {
            indexList.map((item, index) => {
              return (
                <TouchableWithoutFeedback
                  key = { item}
                  onPress = { () => { scrollToLocation(index)  }}
                >
                  <View style={ styles.indexItem }>
                    <Text style={ current === index ? styles.indexItemTextActive : styles.indexItemText }>{ item }</Text>
                  </View>
                </TouchableWithoutFeedback>
              )
            })
          }
        </View>
      </View>
    </View>
  )
}

export default inject('store')(observer(City))

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    width: '100%',
    height: 44,
    backgroundColor: '#0f0',
    justifyContent: 'center',
    alignItems: 'center'
  },
  content: {
    width: '100%',
    flex: 1,
  },
  cityItem: {
    height: 36,
    borderBottomColor: '#f7f7f7',
    borderBottomWidth: 1,
    marginRight: 15,
    borderStyle: 'solid',
    justifyContent: 'center',
    paddingLeft: 15
  },
  cityItemHeader: {
    height: 30,
    backgroundColor: '#efefef',
    justifyContent: 'center',
    paddingLeft: 15,
  },
  cityItemHeaderText: {
    fontWeight: "700",
    fontSize: 20
  },
  indexListBox: {
    position: 'absolute',
    right: 5,
    top: 0,
    bottom: 0,
    // backgroundColor: '#f66',
    justifyContent: 'center'
  },  
  indexList: {},
  indexItem: {
    width: 18,
    height: 20,
    // backgroundColor: "#efefef",
    marginTop: 5,
    alignItems: 'center'
  },
  indexItemText: {
    fontSize: 16
  },
  indexItemTextActive: {
    color: '#f66',
    fontSize: 18
  }
})
